var PurchaseOrder = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div class="purchase-order-search-form">
        <el-form label-width="calc(4em + 12px)" :inline="true" size="medium">
          <el-form-item label="下单日期">
            <el-date-picker class="form-double" v-model="search.startTime" value-format="timestamp" :editable="false" :picker-options="startPickerOptions">
            </el-date-picker>
            -
            <el-date-picker class="form-double" v-model="search.endTime" value-format="timestamp" :editable="false" :picker-options="endPickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input class="form-input" v-model="search.materialName" placeholder="请输入物料名称"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input class="form-input" v-model="search.model" placeholder="请输入物料名称"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input class="form-input" v-model="search.color" placeholder="请输入物料名称"></el-input>
          </el-form-item>
          <el-form-item label="供方编号">
            <el-input class="form-input" v-model="search.providerNo" placeholder="请输入物料名称"></el-input>
          </el-form-item>
          <el-form-item label="下单公司">
            <el-input class="form-input" v-model="search.company" placeholder="请输入物料名称"></el-input>
          </el-form-item>
        </el-form>
        
      </div>
    `;

    return {
      props: {
        search: {
          type: Object,
          required: true
        }
      },

      data: function () {
        var self = this;
        return {
          startPickerOptions: {
            disabledDate: function (time) {
              return !self.checkDateRange(time, 'start');
            }
          },
          endPickerOptions: {
            disabledDate: function (time) {
              return !self.checkDateRange(time, 'end');
            }
          }
        };
      },

      methods: {
        checkDateRange: function (time, type) {
          var search = this.search;
          if (type === 'start') {
            var endTime = search.endTime;
            if (endTime !== null) {
              return moment(time).isSameOrBefore(endTime, 'day');
            }
          } else if (type === 'end') {
            var startTime = search.startTime;
            if (startTime !== null) {
              return moment(time).isSameOrAfter(startTime, 'day');
            }
          }
          return true;
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="purchase-order" v-loading.fullscreen.lock="loading">
      <search-btn-view append-to-body btn-text="查询采购单" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="purchase-order-table-div">
        <el-table fit stripe border :data="orderList" style="width:100%" height="parent">
          <el-table-column sortable prop="providerNo" label="供方编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="providerName" label="商家" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="company" label="下单公司" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="purchasePeople" label="下单人" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="color" label="编号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="colorDescription" label="描述" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="model" label="规格型号" min-width="110px" header-align="center"></el-table-column>
          <el-table-column sortable prop="qualityType" label="材质" min-width="80px" header-align="center"></el-table-column>
          <el-table-column sortable prop="unit" label="单位" min-width="80px" align="center"></el-table-column>
          <el-table-column sortable prop="tax" label="税率" min-width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.tax!==''">{{scope.row.tax}}%</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="price" label="含税单价" min-width="100px" align="center"></el-table-column>
          <el-table-column sortable prop="purchaseCount" label="采购数量" min-width="100px" align="center"></el-table-column>
          <el-table-column sortable prop="totalMoney" label="金额" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" sortable prop="approvalTime" label="下单日期" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.approvalTime!==''">{{moment(scope.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="toOutStock(scope.row)">出库</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        startTime: null, //下单日期
        endTime: null,
        materialName: '',
        model: '',
        color: '',
        providerNo: '',
        company: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        orderList: [],
        moment: moment
      };
    },

    created: function () {
      this.setOrderList(true);
    },

    methods: {
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var postData = this.getPostData();
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData.start = start;
        postData.length = pageSize;

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/getAllPurchaseMyCompanyMaterial', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var orderList = res.returnData;
          orderList = ModuleUtil.getPurchaseOrderList(orderList);

          self.orderList = orderList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getPostData: function () {
        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'providerNo', 'company'];
        var postData = {};
        SysUtil.setPostData(postData, search, fields);

        var startTime = search.startTime;
        if (startTime !== null) {
          postData.startTime = moment(startTime).format('YYYY-MM-DD');
        }

        var endTime = search.endTime;
        if (endTime !== null) {
          postData.endTime = moment(endTime).format('YYYY-MM-DD');
        }
        return postData;
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange: function () {
        this.setOrderList();
      },

      toOutStock: function (order) {
        var toPage = 'finishProduceOut.html';
        this.loading = true;
        var self = this;
        PermissionUtil.validatePageAuthority(toPage).then(function (flag) {
          self.loading = false;
          if (!flag) {
            self.$alert('没有出库权限不能出库', '信息');
            return;
          }

          var postData = {
            materialName: order.materialName,
            model: order.model,
            color: order.color,
            providerNo: order.providerNo,
            providerName: order.providerName
          };
          StorageUtil.setSession('out_material_stock', postData);
          var $page = $(window.parent.document).find(`[data-href='${toPage}']`);
          window.parent.Hui_admin_tab($page[0]);
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    },

    template: template
  };
}();